<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <script>
    // 题型1
    setTimeout(() => {
      console.log('timeout1');
      setTimeout(() => {
        console.log('timeout3');
      })
      Promise.resolve(5).then(
        value => { console.log('成功了5'); }
      )
    }, 5000)
    setTimeout(() => {
      console.log('timeout2');
    }, 3000)
    Promise.resolve(3).then(
      value => { console.log('成功了3'); }
    )
    Promise.resolve(4).then(
      value => { console.log('成功了4'); }
    )
    /*
      输出结果：
        成功了3
        成功了4
        timeout2
        timeout1
        成功了5
        timeout3
    */

  </script>

  <script>
    // 题型2
    setTimeout(() => {        //进宏队列1
      console.log('0');       //微队列5执行完，执行宏队列1，控制台输出 1 7 2 3 8 4 6 5 0
    });
    new Promise((resolve, reject) => {
      console.log('1');       //立即执行，控制台输出 1
      resolve();
    })
      .then(() => {             //进微队列1
        console.log('2');       //主线程执行完，执行微队列1，控制台输出 1 7 2
        new Promise((resolve, reject) => {
          console.log('3');     //立即执行，控制台输出 1 7 2 3
          resolve();
        })
          .then(() => {           //进入微队列3
            console.log('4');     //微队列2执行完后，执行微队列3，控制台输出 1 7 2 3 8 4
          })
          .then(() => {           //promise状态pending，放入promise自身伪数组2  //微队列3执行完，promise状态变为fulfilled，进入微队列5
            console.log('5');     //微队列4执行完，执行微队列5，控制台输出 1 7 2 3 8 4 6 5
          })
      })
      .then(() => {             //promise状态pending，放入promise自身伪数组1  //微队列1执行完后，promise状态变为fulfilled，进微队列4
        console.log('6');       //微队列3执行完，执行微队列4，控制台输出 1 7 2 3 8 4 6 
      })
    new Promise((resolve, reject) => {
      console.log('7');       //立即执行，控制台输出 1 7
      resolve();
    })
      .then(() => {             //进微队列2
        console.log('8');       //微队列1执行完后，执行微队列2，控制台输出 1 7 2 3 8
      })
    /*
      输出结果：1 7 2 3 8 4 6 5 0
      */
  </script>
</body>

</html>